<template>
    <section style="width: 100%; height: 800px;">
        <el-button @click="getData">sss</el-button>
        <no-ssr>
            <el-amap  v-if="mapShow" vid="amap"  class="amap-demo" :center="center" :events="events" :zoom="zoom">
            </el-amap>

        </no-ssr>

    </section>
</template>

<script>
    import * as _ from 'lodash';
    import API from "../../api";
    export default {
        data() {
            let self = this;
            return {
                center: [116.40, 39.90],
                zoom:7,
                mapShow:false,
                finePoint:[],
                abPoint:[],
                events: {
                    init(map) {
                        map.setMapStyle('amap://styles/3a82ba96177c1ee8cf86ea6ff6229ce8')
                        let markers = _.cloneDeep(self.finePoint);
                        console.log(markers)
                        markers.forEach(item=>{
                            var circleMarker = new AMap.CircleMarker({
                                center: [item.longitude,item.latitude],
                                radius:10,
                                strokeColor:'white',
                                strokeWeight:2,
                                strokeOpacity:0.5,
                                fillColor:'green',
                                fillOpacity:0.5,
                                zIndex:10,
                                bubble:true,
                                cursor:'pointer',
                                clickable: true
                            })
                            circleMarker.setMap(map)
                            circleMarker.on('click',self.goto)
                        });
                        let abmarkers = _.cloneDeep(self.abPoint);
                        abmarkers.forEach(item=>{
                            var circleMarker = new AMap.CircleMarker({
                                center: [item.longitude,item.latitude],
                                radius:10,
                                strokeColor:'white',
                                strokeWeight:2,
                                strokeOpacity:0.5,
                                fillColor:'red',
                                fillOpacity:0.5,
                                zIndex:10,
                                bubble:true,
                                cursor:'pointer',
                                clickable: true
                            })
                            circleMarker.setMap(map)
                            circleMarker.on('click',self.goto)
                        })
                    }
                },

            };
        },
        methods: {
            getData(){
                //正常点位
                API.finePoint().then(res=>{
                    if(res.code){
                        alert(res.message);
                        return;
                    }
                this.finePoint = res
                }).catch(msg => {
                    if(res.code){
                        alert(res.message);
                        return;
                    }
                    alert(msg)
                })
                //不正常点位
                API.abPoint().then(res=>{
                    if(res.code){
                        alert(res.message);
                        return;
                    }
                    this.abPoint = res
                    this.showMap()
                }).catch(msg => {
                    if(res.code){
                        alert(res.message);
                        return;
                    }
                    alert(msg)
                })
            },
            showMap(){
                this.mapShow = true
            },
            goto(item) {
                console.log("????")
                this.$router.push({path: `/camera`})
            }
        },
        mounted() {
            // this.getData()
            // this.showMap()
        },
        created() {
            this.getData()
        }

    };
</script>
